<template>
    <!-- pages/gatheringAuth/wxCodeAuth/index.wxml -->
    <view>
        <view class="steps">
            <van-steps :steps="steps" :active="tab" active-color="#FFB900" />
        </view>
        <view class="box1" v-if="tab == 0">
            <view class="text_D">请商户法人使用微信扫描下方小程序码，按照步骤完成商家注册</view>
            <view class="text_6 mt-20">温馨提示:</view>
            <view class="text_6 mt-20">1.若扫码后未找到需要授权商户号，搜索该商户号授权；</view>
            <view class="text_6 mt-20">2.商户名称选择必须与下面的商户名称保持一致，若无 该商户名称，请选择注册新商户。</view>
            <view class="text_6 mt-20">
                ·商户号：
                <view class="text-g imgbox">
                    {{ incomingInfo.wechatMerchantId }}
                    <image class="copy" @tap.stop.prevent="copywxtap" src="/static/images/cv.png" />
                </view>
            </view>
            <view class="text_6 mt-20">
                ·商户名称：
                <view class="text-g imgbox">
                    {{ incomingInfo.mchtName }}
                    <image class="copy" @tap.stop.prevent="copywxtapName" src="/static/images/cv.png" />
                </view>
            </view>
            <image class="img" @tap.stop.prevent="previewImg" :data-item="incomingInfo.wechatVerifyQrCode" :src="incomingInfo.wechatVerifyQrCode"></image>
            <view class="text_6 text-center mt-20">长按直接识别或转发给法人</view>
            <view class="first_btn" @tap.stop.prevent="onNext">下一步</view>
        </view>
        <view class="box2" v-if="tab == 1">
            <view class="combox">
                <view class="title">步骤1-A:</view>
                <view class="content">未注册微信商家:微信扫描小程序码后-点击“开始注册”-选择正确的主体类型</view>
            </view>
            <view>
                <image class="imgs" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'wx_1.jpg'" :src="shopimgUrl + 'wx_1.jpg'"></image>
            </view>
            <view class="combox">
                <view class="title">步骤1-B:</view>
                <view class="content">已注册微信商家:微信扫描小程序码后-点击商户名称-点击“注册新商家”，进入选择主体页面。选择正确的主体类型</view>
            </view>
            <view>
                <image class="imgs_2" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'wx_2.jpg'" :src="shopimgUrl + 'wx_2.jpg'"></image>
            </view>
            <view class="flexbox-sb">
                <view class="w-50">
                    <view class="combox">
                        <view class="title">步骤2:</view>
                        <view class="content">选择主体后-根据要求填写商户资料</view>
                    </view>
                </view>
                <view class="w-50">
                    <image class="imgs_3" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'wx_3.jpg'" :src="shopimgUrl + 'wx_3.jpg'"></image>
                </view>
            </view>
            <view class="flexbox-sb">
                <view class="w-50">
                    <view class="combox">
                        <view class="title">步骤3:</view>
                        <view class="content">商家身份验证，法人扫描二维码完成验证</view>
                    </view>
                </view>
                <view class="w-50">
                    <image class="imgs_3" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'wx_4.jpg'" :src="shopimgUrl + 'wx_4.jpg'"></image>
                </view>
            </view>
            <view class="flexbox-sb">
                <view class="w-50">
                    <view class="combox">
                        <view class="title">步骤4:</view>
                        <view class="content">商户法人确认信息无误后点击“确认无误”按钮</view>
                    </view>
                </view>
                <view class="w-50">
                    <image class="imgs_3" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'wx_5.jpg'" :src="shopimgUrl + 'wx_5.jpg'"></image>
                </view>
            </view>
            <view class="combtnbox flexbox-sb mt-246">
                <view class="com_s" @tap.stop.prevent="onBack">上一步</view>
                <view class="com_x" @tap.stop.prevent="onNext">下一步</view>
            </view>
        </view>
        <view class="box2" v-if="tab == 2">
            <view class="flexbox-sb">
                <view class="w-50">
                    <view class="combox">
                        <view class="title">步骤1-A:</view>
                        <view class="content">勾选已注册的商户,点击“确认无误”按钮,完成微信商户实名认证</view>
                    </view>
                </view>
                <view class="w-50">
                    <image class="imgs_3" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'wx_6.jpg'" :src="shopimgUrl + 'wx_6.jpg'"></image>
                </view>
            </view>
            <view class="flexbox-sb">
                <view class="w-50">
                    <view class="combox">
                        <view class="title">步骤1-B:</view>
                        <view class="content">
                            若出现右图页面,点击“点击搜索”按钮输入商家微信商户号
                            <text class="text-g">{{ incomingInfo.wechatMerchantId }}</text>
                            点击“同意授权”即可
                        </view>
                    </view>
                </view>
                <view class="w-50">
                    <image class="imgs_3" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'wx_7.jpg'" :src="shopimgUrl + 'wx_7.jpg'"></image>
                </view>
            </view>
            <view class="combtnbox flexbox-sb mt-246">
                <view class="com_s" @tap.stop.prevent="onBack">上一步</view>
                <view class="com_x" @tap.stop.prevent="onSucceed">完成</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/gatheringAuth/wxCodeAuth/index.js
const app = getApp(); // 引入app

const _request = require('../../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            tab: 0,
            // 第几步
            steps: [
                {
                    text: '扫码注册'
                },
                {
                    text: '填写资料'
                },
                {
                    text: '授权'
                }
            ],
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            incomingInfo: null,
            shopimgUrl: app.globalData.shopimgUrl
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.getIncoming();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 复制邀请码
        copywxtap() {
            uni.showToast({
                title: '复制成功'
            });

            let _this = this;

            uni.setClipboardData({
                data: _this.incomingInfo.wechatMerchantId,
                success: function (res) {
                    uni.getClipboardData({
                        //这个api是把拿到的数据放到电脑系统中的
                        success: function (res) {}
                    });
                }
            });
        },

        // 复制商户名称
        copywxtapName() {
            uni.showToast({
                title: '复制成功'
            });

            let _this = this;

            uni.setClipboardData({
                data: _this.incomingInfo.mchtName,
                success: function (res) {
                    uni.getClipboardData({
                        //这个api是把拿到的数据放到电脑系统中的
                        success: function (res) {}
                    });
                }
            });
        },

        //点击图片进行预览，长按保存分享图片
        previewImg(e) {
            uni.previewImage({
                current: e.currentTarget.dataset.item,
                // 当前显示图片的http链接
                urls: [e.currentTarget.dataset.item] // 需要预览的图片http链接列表
            });
        },

        // 下一步
        onNext(e) {
            this.setData({
                tab: this.tab + 1
            });
        },

        // 上一步
        onBack() {
            this.setData({
                tab: this.tab - 1
            });
        },

        // 完成
        onSucceed() {
            uni.reLaunch({
                url: '/pages/gatheringAuth/index'
            });
        },

        getIncoming() {
            // 获取进件（盒子商户）信息
            _request
                .get('/box/getIncoming', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        const data = res.data.data;
                        this.setData({
                            incomingInfo: data
                        });
                    }
                });
        }
    }
};
</script>
<style>
/* pages/gatheringAuth/wxCodeAuth/index.wxss */
page {
    padding: 20rpx 0rpx;
    margin: 0;
    box-sizing: border-box;
    font-size: 28rpx;
}

.text_r {
    color: red;
    text-align: center;
    font-size: 24rpx;
}

.text_6 {
    color: #666;
}
.text_7 {
    color: #333333;
    line-height: 50rpx;
}

.text_D {
    font-weight: 900;
}

.text_9 {
    color: #999;
}

.text_b {
    color: rgb(14, 129, 223);
}

.text-center {
    width: 100%;
    text-align: center;
}

.text-g {
    color: #ff8722;
    position: relative;
}

.img {
    width: 560rpx;
    height: 750rpx;
    margin: 20rpx 65rpx;
}

.imgs {
    width: 100%;
    height: 800rpx;
}

.imgs_2 {
    width: 100%;
    height: 1600rpx;
}

.imgs_3 {
    width: 100%;
    height: 600rpx;
}

.w-50 {
    width: 50%;
}

.steps {
    padding: 0 50rpx;
}

.steps .van-steps {
    background-color: #f5f5f5 !important;
}

.steps .van-steps--horizontal {
    padding: 0 !important;
    padding-bottom: 20rpx !important;
}

.van-step--horizontal .van-step__circle-container {
    background-color: #f5f5f5 !important;
}

.van-dialog__header {
    color: #ee0a24;
}

.van-button--large {
    color: rgb(230, 164, 22) !important;
}

.box1 {
    padding: 0 30rpx;
}

.imgbox {
    display: initial;
    font-size: 40rpx;
}

.copy {
    position: relative;
    /* top: -20rpx; */
    right: 0;
    width: 30rpx;
    height: 30rpx;
}

.first_btn {
    width: 670rpx;
    height: 88rpx;
    margin: 100rpx 10rpx;
    background: #ff8722;
    border-radius: 44px;
    line-height: 88rpx;
    color: #fff;
    text-align: center;
}

.combox {
    padding: 20rpx 30rpx;
    width: 100%;
    background-color: #ffe4c4;
    box-sizing: border-box;
}

.title {
    color: #ff8722;
    font-weight: 500;
}

.content {
    color: #666;
    margin-top: 20rpx;
}

.combox img {
    width: 50%;
}

.combtnbox {
    padding: 30rpx 40rpx;
    background: #fff;
    box-sizing: border-box;
}

.combtnbox > view {
    width: 300rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 24rpx;
    border-radius: 44px;
    text-align: center;
}

.com_s {
    border: 1px solid #ff8722;
    color: #ff8722;
}

.com_x {
    background: #ff8722;
    color: #fff;
}
</style>
